<template>
	<view>
		<view class="dis-flex flex-center px15 bg-common-gradient mt10" style="height: 200rpx;">
			<view class="c-fff fs20 center fw600">{{getStateName(detailItem.status)}}</view>
		</view>
		
		<view class="address-view mt10">
			<view class="address-info">
				<view class="dis-flex flex-align-center fs14 c-333 fw600">
					<u-icon name="map" color="#666" size="40"></u-icon>
					<text class="pl15 breakall">{{detailItem.address.truename}}</text>
					<text class="ml10 breakall">{{detailItem.address.mobile}}</text>
				</view>
				<view class="mt5 breakall ml35">
					<text class="fs13 c-333">{{detailItem.address.region}}/{{detailItem.address.city}}/{{detailItem.address.xian}} {{detailItem.address.address}}</text>
				</view>
			</view>
		</view>
		
		<view class="px10 dis-flex bb flex-align-center py10 bg-fff mt10" style="height: 200rpx;">
			<u-image :src="detailItem.next? $store.state.host+detailItem.next.goods_thumb:''" width="200" height="200" border-radius="10"></u-image>
			<view class="flex dis-flex-column ml10 flex-between" style="height: 200rpx;">
				<view class="ellipsis-2 fs14 fwb breakall">{{detailItem.next?detailItem.next.goods_name:''}}</view>
				<view class="dis-flex flex-align-center flex-between">
					<view class="fs14 breakall c-red">{{detailItem.next?detailItem.next.score:''}}积分</view>
					<view class="fs14 breakall">×{{detailItem.next?detailItem.next.buy_num:''}}</view>
				</view>
			</view>
		</view>
		
		<view class="bg-fff dis-flex-column pl15 pr15 mt10">
			<view class="py10 bb pl10">
				<th-message-view title="合计积分" titleColor="#333" :size="28" :detail="detailItem.score_total"
					paddingY="10"> </th-message-view>
			</view>
			<view class="py10 bb pl10">
				<th-message-view title="下单时间" titleColor="#333" :size="28" :detail="$u.timeFormat(detailItem.createtime, 'yyyy-mm-dd')"
					paddingY="10"> </th-message-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				detailItem:{
					address:{}
				}
			}
		},

		onLoad(option) {
			this.id = option.id || '';
			this.getDetail();
		},

		methods: {
			
			getStateName(state){
				switch(state){
					case '3':
						return '异常订单'
					break;
					case '2':
						return '驳回'
					break;
					case '-1':
						return '关闭订单'
					break;
					case '0':
						return '未支付'
					break;
					case '1':
						return '已支付'
					break;
					case '2':
						return '已发货'
					break;
					case '3':
						return '已签收'
					break;
					case '4':
						return '退货中'
					break;
					case '5':
						return '已退款'
					break;
				}
			},
			
			getDetail(){
				this.$http.post(this.$config.UrlMyOrderDetail, {
					id: this.id,
				}, {
					log: true,
					header: {
						'content-type': 'application/json'
					}
				}).then((res) => {
					if(res.code == 1){
						this.detailItem = res.data || {};
					}else this.$api.toast(res.msg);
				})
			},
		}
	}
</script>

<style>
	
	.address-view {
		position: relative;
		padding: 20rpx 30rpx;
		background-color: #fff;
	}
	
	.address-view .topbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 218rpx;
	}
	
	.address-view .address-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70rpx;
		height: 70rpx;
		border-radius: 50px;
		text-align: center;
	}
	
	.address-view .address-info {
		position: relative;
		flex: 1;
		background: #fff;
		padding: 10rpx 0rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 80rpx;
	}
	

</style>
